import { h } from 'vue'
import { createRouter, createWebHashHistory, RouterView } from 'vue-router'

const Layout = () => import('@/views/Layout')
const Home = () => import('@/views/home')

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        component: Home
      },
      { path: '/category/:id', component: () => import('@/views/category') },
      { path: '/category/sub/:id', component: () => import('@/views/category/sub') },
      { path: '/product/:id', component: () => import('@/views/goods') },
      { path: '/cart', component: () => import('@/views/cart') },
      { path: '/member/checkout', component: () => import('@/views/member/pay/checkout') },
      { path: '/member/pay', component: () => import('@/views/member/pay/index') },
      { path: '/pay/callback', component: () => import('@/views/member/pay/result') },
      { 
        path: '/member',
        component: ()=> import('@/views/member/Layout'),
        children:[
          { path:'', component:()=> import ('@/views/member/home') }, 
          { path:'/member/order', component:()=> import ('@/views/member/order'), meta:{keepAlive:true} },
          { path:'/member/order/:id', component:()=> import ('@/views/member/order/detail') }
          // {
          //   path:'order',
          //   // 形成路由的嵌套关系
          //   component: { render: ()=> h(<RouterView/>) },
          //   children:[
          //     { path:'', component: ()=> import('@/views/member/order') },
          //     { path:':id', component: ()=> import('@/views/member/order/detail') },
          //   ]
          // }
        ]
      }
    ]
  },
  { path: '/login', component: () => import('@/views/login') }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  scrollBehavior (to, from, savedPosition) {
    if(savedPosition){
      return savedPosition
    }else{
      return { top:0, left:0}
    }
  }
})

export default router
